<template>
  <basic-container>
    <basic-header title="新增/编辑弹窗">
      <el-button @click="$router.go(-1)">返回</el-button>
    </basic-header>
    <el-form :model="formData" ref="form" label-width="160px" class="detail-form" :rules="formRules" v-loading="loading">
      <el-form-item label="弹窗类型" prop="popupType">
        <div class="detail-form-input">
          <el-select v-model="formData.popupType" placeholder="请选择">
            <el-option value="COUPON" label="优惠券" />
            <el-option value="NOTICE" label="公告" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="内容" prop="body" v-if="formData.popupType === 'NOTICE'">
        <div class="detail-form-input">
          <el-input v-model="formData.body" type="textarea" placeholder="请输入内容描述" maxlength="60" :show-word-limit="true" :rows="4" />
        </div>
      </el-form-item>
      <el-form-item label="内容" v-else>
        <div class="detail-form-input">
          <el-col :span="3" class="line-text">满</el-col>
          <el-col :span="9">
            <el-form-item prop="fullMoney">
              <el-input v-model.number="formData.fullMoney" />
            </el-form-item>
          </el-col>
          <el-col :span="3" class="line-text">减</el-col>
          <el-col :span="9">
            <el-form-item prop="discounts">
              <el-input v-model.number="formData.discounts" />
            </el-form-item>
          </el-col>
        </div>
      </el-form-item>
      <el-form-item label="开始日期" prop="startTime" v-if="formData.popupType !== 'NOTICE'">
        <div class="detail-form-input">
          <el-date-picker v-model="formData.startTime" type="date" placeholder="选择日期" />
        </div>
      </el-form-item>
      <el-form-item label="结束日期" prop="endTime" v-if="formData.popupType !== 'NOTICE'">
        <div class="detail-form-input">
          <el-date-picker v-model="formData.endTime" type="date" placeholder="选择日期" />
        </div>
      </el-form-item>
      <el-form-item class="detail-form-bottom">
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </basic-container>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import detailMixin from "@/mixins/detail";

export default {
  name: "popup-detail",
  mixins: [detailMixin],
  computed: {
    ...mapState("table", ["currentData"]),
    ...mapState("@@loading", {
      loading: state => state.effects["table/GetDetailData"]
    })
  },
  data() {
    const describeValidate = (r, v, c) => {
      if (this.formData.popupType === "NOTICE" && !v) {
        return c("请输入内容");
      }
      c();
    };
    const meetValidate = (r, v, c) => {
      if (this.formData.popupType === "COUPON" && !v) {
        return c("请输入内容");
      }
      c();
    };
    const reduceValidate = (r, v, c) => {
      if (this.formData.popupType !== "COUPON") {
        return c();
      }
      if (!v) {
        return c("请输入内容");
      }

      if (v > this.formData.fullMoney) {
        return c("不可以大于满减值");
      }
      c();
    };
    const endTimeValidate = (r, v, c) => {
      if (!v) {
        return c("请选择结束日期");
      }
      const endTime = new Date(v).getTime();
      const startTime = this.formData.startTime
        ? new Date(this.formData.startTime).getTime()
        : 0;
      if (endTime < startTime) {
        return c("结束日期不能小于开始日期");
      }
      c();
    };
    return {
      formData: {},
      formRules: {
        popupType: [
          {
            required: true,
            message: "请选择弹窗类型",
            trigger: ["change", "blur"]
          }
        ],
        body: [{ validator: describeValidate, trigger: ["blur"] }],
        fullMoney: [
          { validator: meetValidate, trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "change" }
        ],
        discounts: [
          { validator: reduceValidate, trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "change" }
        ],
        startTime: [
          { required: true, message: "请选择开始日期", trigger: ["change"] }
        ],
        endTime: [{ validator: endTimeValidate, trigger: "blur" }]
      }
    };
  },
  async created() {
    const { action, type, id } = this.$route.query;
    if (type !== "add" && !id) {
      this.$router.go(-1);
      return;
    }
    if (type !== "add") {
      await this.GetDetailData({ action, id });
    }
    this.formData = { ...this.currentData };
    this.detailType = type;
    this.action = action;
  },
  methods: {
    ...mapMutations({
      setCurrentData: "table/SET_CURRENT_DATA"
    }),
    ...mapActions({
      GetDetailData: "table/GetDetailData",
      saveDetailData: "table/saveDetailData"
    }),
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.saveDetailData({action: this.action, formData: this.formData})
            .then(() => {
              this.$message({
                type: "success",
                message: this.detailType === "add" ? "添加成功" : "修改成功"
              });
              setTimeout(() => this.$router.go(-1), 1500);
            })
            .catch(error => {
              this.$message({
                type: "error",
                message: error.message || String(error)
              });
            });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.describe-input {
  div.el-input {
    display: inline-block;
    width: 80px;
    margin: 0 8px;
  }
}
.line-text {
  text-align: center;
}
</style>
